import React from 'react'
import axios from 'axios'
import { NavBar, ImagePicker, InputItem, TextareaItem, List, WhiteSpace, Button, Toast  } from 'antd-mobile'

class Geniusinfo extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      files: [],
      showImgadd: false,
      desc: '',
      title: '',
      money: ''
    }
  }
  addBossInfoAsync = pramas => {
    axios.post('/user/userUpdate', pramas)
      .then(res => { 
        if (res.status === 200 && res.data.code === 0) {
          this.props.history.push('/genius')
        }
      })
  }
  onChangeAvatar = (files, type, index) => {
    console.log(files, type, index)
    this.setState({
      files,
      hideImgadd: files.length > 0 ? false : true
    })
  } 
  inputChange = (type, val) => {
    this.setState({
      [type]: val
    })
  }
  handSubmit = () => {
    const { files, desc, title, money  } = this.state
    if (!files.length || !desc || !title || !money) {
      Toast.info('请完善信息！', 1)
    } else {
      const forData = new FormData()
      forData.append('desc', desc)
      forData.append('title', title)
      forData.append('money', money)
      forData.append('avatar', files[0].file)
      this.addBossInfoAsync(forData)
    }
  }
  render() {
    const { files, hideImgadd } = this.state
    const Item = List.Item
    return <div>
      <NavBar mode="dark">完善信息</NavBar>
      <List>
        <Item>
          <div style={{ textAlign: 'center',marginLeft: '12px' }}>上传头像</div>
          <div style={{ position: 'relative', left: '38%'  }}>
            <ImagePicker
              length="1"
              selectable = { hideImgadd }
              files={ files }
              onChange={ this.onChangeAvatar }
            />
          </div>
        </Item>
        <Item>
          <InputItem name='title' onChange={ val => this.inputChange('title', val) }>
            <div>求职岗位</div>
          </InputItem>
          <WhiteSpace size="md" />
        </Item>
        <Item>
          <InputItem
            name="money"
            type="number"
            extra="¥"
            onChange={ val => this.inputChange('money', val) }
          >
            <div>期待薪资</div>
          </InputItem>
          <WhiteSpace size="md" />
        </Item>
        <Item>
          <TextareaItem
            title="个人简介"
            name="desc"
            autoHeight
            labelNumber={5}
            onChange={ val => this.inputChange('desc', val) }
          />
          <WhiteSpace size="md" />
        </Item>
      </List>
      <div style={{ width: '80%', margin: '10px auto 0 auto' }}>
        <Button type="primary" onClick={ this.handSubmit }>保存</Button>
      </div>
    </div>
  }
}

export default Geniusinfo